<template>
  <div>
    <oolongTooltip content="这里是提示文字">
      当鼠标经过这段文字时，会显示一个气泡框
    </oolongTooltip>
    <br><br>
    <div class="top">
      <oolongTooltip content="Top Left 文字提示" placement="top-start">
        <oolongButton>上左</oolongButton>
      </oolongTooltip>
      <oolongTooltip content="Top Center 文字提示" placement="top">
        <oolongButton>上边</oolongButton>
      </oolongTooltip>
      <oolongTooltip content="Top Right 文字提示" placement="top-end">
        <oolongButton>上右</oolongButton>
      </oolongTooltip>
    </div>
    <div class="center">
      <div class="center-left">
        <oolongTooltip content="Left Top 文字提示" placement="left-start">
          <oolongButton>左上</oolongButton>
        </oolongTooltip>
        <br><br>
        <oolongTooltip content="Left Center 文字提示" placement="left">
          <oolongButton>左边</oolongButton>
        </oolongTooltip>
        <br><br>
        <oolongTooltip content="Left Bottom 文字提示" placement="left-end">
          <oolongButton>左下</oolongButton>
        </oolongTooltip>
      </div>
      <div class="center-right">
        <oolongTooltip content="Right Top 文字提示" placement="right-start">
          <oolongButton>右上</oolongButton>
        </oolongTooltip>
        <br><br>
        <oolongTooltip content="Right Center 文字提示" placement="right">
          <oolongButton>右边</oolongButton>
        </oolongTooltip>
        <br><br>
        <oolongTooltip content="Right Bottom 文字提示" placement="right-end">
          <oolongButton>右下</oolongButton>
        </oolongTooltip>
      </div>
    </div>
    <div class="bottom">
      <oolongTooltip content="Bottom Left 文字提示" placement="bottom-start">
        <oolongButton>下左</oolongButton>
      </oolongTooltip>
      <oolongTooltip content="Bottom Center 文字提示" placement="bottom">
        <oolongButton>下边</oolongButton>
      </oolongTooltip>
      <oolongTooltip content="Bottom Right 文字提示" placement="bottom-end">
        <oolongButton>下右</oolongButton>
      </oolongTooltip>
    </div>
    <br><br>
    <oolongTooltip placement="top">
      <oolongTooltip>多行</oolongTooltip>
      <div slot="content">
        <p>显示多行信息</p>
        <p><i>可以自定义样式</i></p>
      </div>
    </oolongTooltip>
    <br><br>
    <oolongTooltip placement="top" content="可以禁用文字提示" :disabled="disabled">
      <oolongButton @click="disabled = true">点击关闭提示</oolongButton>
    </oolongTooltip>
    <br><br>
    <oolongTooltip placement="top" content="Tooltip 文字提示" :delay="1000">
      <oolongButton @click="disabled = true">延时1秒显示</oolongButton>
    </oolongTooltip>
  </div>
</template>
<script>
export default {
  data() {
    return {
      disabled: false
    }
  }
}
</script>
<style lang="scss" scoped>
.top, .bottom {
  text-align: center;
}

.center {
  width: 300px;
  margin: 10px auto;
  overflow: hidden;
}

.center-left {
  float: left;
}

.center-right {
  float: right;
}
</style>
